<template>
  <div>
    <!-- 增加顾客来源 -->
    <Dialog :visible="visible" :title="title" class="single-column" button-text="保存" :loading="loading" @close="close" @confirm="submitForm('ruleForm')">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类型:" prop="type">
          <!-- @change="handleChange(ruleForm.type,ruleForm.automaticSynchronization)" -->
          <el-select v-model="ruleForm.type" class="el-select-y" placeholder="请选择类型">
            <el-option v-for="item in regions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称:" prop="name">
          <el-input v-model="ruleForm.name" style="width: 237.5px;" />
        </el-form-item>
        <el-form-item label="佣金比例:" prop="commissionRate">
          <el-input v-model="ruleForm.commissionRate" style="width:220px" oninput="value=value.replace(/[^\d]/g,'')" />%
        </el-form-item>
        <el-form-item label="自动同步:" prop="bools">
          <el-switch v-model="ruleForm.bools" />每五分钟同步一次顾客资料
        </el-form-item>
        <el-form-item label="后台:" prop="regions">
          <el-row>
            <el-col>
              <el-select v-model="ruleForm.backstageName" class="el-select-y" placeholder="请选择后台" @change="handleChangeBackstage">
                <el-option v-for="(item,i) in backstageList" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col style="font-size: 12px;">
              <span class="http">找不到后台？</span>
              <el-button type="text" @click="innerVisible=true">立即提交</el-button>
            </el-col>
          </el-row>
          <el-col class="http">{{ ruleForm.adree }}</el-col>
        </el-form-item>
        <el-form-item label="账号:" prop="account">
          <el-input v-model="ruleForm.account" style="width:237.5px" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="ruleForm.password" style="width:237.5px" />
        </el-form-item>
        <el-form-item label="需审核:" prop="bools1">
          <el-switch v-model="ruleForm.bools1" /><span class="http">同步的顾客资料，默认为未审核状态</span>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="启用" />
            <el-radio label="未启用" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-dialog
        width="30%"
        title="提交后台地址"
        :visible.sync="innerVisible"
        class="single-column"
        append-to-body
      >
        <el-form ref="ruleForms" :model="addressData" :rules="addressRules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="后台名字:" prop="name">
            <el-input v-model="addressData.name" />
          </el-form-item>
          <el-form-item label="后台地址:" prop="adree">
            <el-input v-model="addressData.adree" />
          </el-form-item>
          <el-form-item label="账号:" prop="account">
            <el-input v-model="addressData.account" />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="addressData.password" />
          </el-form-item>
          <el-checkbox-group v-model="addressData.type">
            <el-checkbox name="type" label="同意智美医用于数据同步适配，完成后您可以修改密码" />
          </el-checkbox-group>
          <!-- <span>
              同意智美医用于数据同步适配，完成后您可以修改密码
            </span> -->
          <el-row class="bottom-style">
            <el-button class="submits" @click="submitAddress('ruleForms')">保存</el-button>
          </el-row>
        </el-form>
      </el-dialog>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      title: '增加来源',
      visible: false,
      innerVisible: false,
      query: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      loading: false,
      regions: [],
      backstageList: [],
      // adree: '',
      ruleForm: {
        name: '',
        type: '',
      },
      url: '',
      addressData: {
        type: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' },
        ],
      },
      addressRules: {
        name: [
          { required: true, message: '请输入后台名字', trigger: 'blur' },
        ],
        adree: [
          { required: true, message: '请输入后台地址', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请勾选', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    innerVisible: {
      handler(bool) {
        if (!bool) {
          this.$refs['ruleForms'].resetFields();
        }
      },
    },
  },
  methods: {
    submitAddress(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$set(this.addressData, 'checked', true);
          // 新增后台数据
          this.$api["networkpower/customersource/addBackstage"](this.addressData).then((res) => {
            if (res.code !== 200) return this.$message.error("新增后台数据失败");
            this.getBackstage();
            this.innerVisible = false;
            // console.log("奥萨蒂还是到付的");
          });
        } else {
          return false;
        }
      });
    },
    handleChangeBackstage(id) {
      this.backstageList.forEach(item => {
        if (item.id === id) {
          this.ruleForm.adree = item.adree;
          this.ruleForm.account = item.account;
          this.ruleForm.password = item.password;
          this.ruleForm.backstageName = item.name;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.type === '网电') {
            this.$set(this.ruleForm, 'automaticSynchronization', '否');
          } else {
            this.ruleForm.bools ? this.$set(this.ruleForm, 'automaticSynchronization', '是') : this.$set(this.ruleForm, 'automaticSynchronization', '否');
            this.ruleForm.bools1 ? this.$set(this.ruleForm, 'examine', '是') : this.$set(this.ruleForm, 'examine', '否');
          }
          if (!this.url) {
            this.url = 'networkpower/customersource/addSource';
          }
          if (this.ruleForm.commissionRate < 0) {
            this.$message.error("佣金比例不能小于0%");
            return;
          }
          if (this.ruleForm.commissionRate > 100) {
            this.$message.error("佣金比例不能大于100%");
            return;
          }
          console.log(this.ruleForm, "查询表格数据成功");
          this.regions.forEach((item, i) => {
            if (item.id === this.ruleForm.type) {
              this.$set(this.ruleForm, 'typeId', item.id);
              this.$set(this.ruleForm, 'type', item.name);
            }
          });
          this.loading = true;
          this.$api[this.url](this.ruleForm).then((res) => {
            if (res.code !== 200) return this.$message.error("增加顾客渠道来源失败");
            console.log(res);
            this.$message.success("增加顾客渠道来源成功");
            this.visible = false;
            this.$emit('success');
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    // handleChange(val, bool) { // 类型改变的时候
    //   if (val === '网电') {
    //     this.$set(this.ruleForm, 'automaticSynchronization', false);
    //   } else {
    //     this.$set(this.ruleForm, 'automaticSynchronization', bool);
    //   }
    // },
    configure(id) {
      this.visible = true;
      this.getDicoptList();
      this.getBackstage();
      if (!id) {
        this.ruleForm.status = '启用';
        this.ruleForm.automaticSynchronization = false;
        this.title = "增加来源";
      } else {
        this.title = "修改来源";
        this.$api["networkpower/customersource/detailsSource"]({ id }).then((res) => {
          if (res.code !== 200) return this.$message.error("根据id获取顾客来源失败");
          this.ruleForm = res.data;
          this.ruleForm.automaticSynchronization === '否' ? this.$set(this.ruleForm, 'bools', false) : this.$set(this.ruleForm, 'bools', true);
          this.ruleForm.examine === '否' ? this.$set(this.ruleForm, 'bools1', false) : this.$set(this.ruleForm, 'bools1', true);
          this.url = 'networkpower/customersource/eaditSource';
        });
      }
    },
    getDicoptList() {
      this.$api["networkpower/sourceType/findAll"]().then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.regions = res.data;
      });
    },
    getBackstage() { // 获取后台数据
      this.$api["networkpower/customersource/getBackstage"]().then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.backstageList = res.data;
      });
    },
    close() {
      this.$refs['ruleForm'].resetFields();
      this.visible = false;
      this.url = '';
    },
  },
};
</script>
<style lang="scss" scoped>
// /deep/.el-form.demo-ruleForm{
  // width: 70% ;
  // transform: translateX(25%);
  // margin-left: 12%;
// }
.http{
  color: #aaaaaa;
  margin: -15px 0 -10px 0;
}
// /deep/.el-dialog__body{
//   padding: 30px 0 !important;
// }
.submits{
  width: 186px;
  height: 30px;
  font-size: 12px;
  background: #0278dc !important;
  border: 1px solid #0278dc !important;
  color: #fff;
  // transform: translateX(23%);
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}

/deep/ .el-form-item .el-select{
  width: 237.5px;
  }

.bottom-style{
  margin: 18px 0;
  text-align: center;

}
/deep/.el-form-item__content{
  font-size: 12px;
}
</style>
